<!-- 参团页面 -->
<template>
	<view class="page" id="join_gbuy">
		<status-bar title='我要参团' :goHome='options.fromShare?options.fromShare:0'></status-bar>
		<backTop v-if='toTop'></backTop>
		<!-- 下单产品 start -->
		<template v-if='pageData'>
			<view class="order_goods">
				<view class="shop flex-box align-center">
					<!-- <text class="iconfont icon-dianpu"></text> -->
					<image v-if='pageData.data[0].shopLogo' @error="pageData.data[0].shopLogo = ''" :src="$imgUrls(pageData.data[0].shopLogo)" mode="aspectFill" class="shop-logo"></image>
					<text v-else class="iconfont icon-dianpu"></text>
					<text class="name">{{pageData.data[0].shopName?pageData.data[0].shopName:shopName}}</text>
				</view>
				<view class="agoods">
					<view class="agoods_thumb">
						<image :src="$imgUrls(gooodsData.img)" class="agoods_thumb_img" mode="aspectFill"></image>
					</view>
					<view class="agoods_info">
						<view class="agoods_t">{{gooodsData.name}}</view>
						<view class="agoods_info_info">
							<view class="price4">
								￥<text class="price4_num">{{gooodsData.open_group_price}}</text>
							</view>
							<view class="ff_a c_999999">x1</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 团购用户 start -->
			<view class="gbuy_user mb_03">
				<view class="gbuy_user_timer" v-if='pageData.gameOver>0'>
					<template v-if='pageData.missPeople>0'>
						还差<text class="c_ff4b4e">{{pageData.missPeople}}</text>人成团 &nbsp;剩余&nbsp;
						<count-down txtColor='#EC3D00' fontSize='28' :time="parseInt(pageData.gameOver)"></count-down>
					</template>
					<template v-else>
						已满员啦
					</template>
				</view>
				<view class="gbuy_user_timer" v-else>
					<text class="c_ff4b4e">拼团活动已经结束了，下次要积极一点哦</text>
				</view>
				<view class="gbuy_user_list">
					<view class="gbuy_user_item" v-for='(head,index) in pageData.groupUsers' :key='index'>
						<image :src="$imgUrls(head.v_headimg)" class="gbuy_user_avatar" mode="aspectFill"></image>
						<text class="tag color6" v-if='head.v_id == pageData.main_v_id'>团长</text>
					</view>
				</view>
				
				<!-- <view class="btn4" @click="showShareQr=true">测试海报</view> -->
				
				<template v-if='pageData.gameOver > 0'>
					<view class="btn4 p-re" v-if='vid == pageData.main_v_id'>
						<text class="size28">邀请好友</text>
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share" class="btn-contact"></button>
						<!-- #endif -->
					</view>
					<view class="btn4" v-else @click="viewIsShow">我要参团</view>
				</template>
				<view class="btn4" v-else style="background: #999999;">活动已结束</view>
				
			</view>
			<!-- 团购用户 end -->
			<view class="goods_info">
				<navigator url="/activityPage/group/playing_Method" hover-class="none">
					<view class="navbar">
						<view class="navbar_box flex-box align-center">
							<view class="navbar_t">玩法</view>
							<view class="navbar_c">开团/参团 - 邀请好友 - 满员发货 - 失败退款</view>
							<text class="iconfont icon-xiangyouxiayiye"></text>
						</view>
					</view>	
				</navigator>
				<mp-html :content="gooodsData.content" lazy-load scroll-table selectable use-anchor show-with-animation/>
			</view>
			<!-- 底部按钮 start -->
			<!-- <footer class="footer_btn_box">
				<navigator url="javascript:;">
					<navigator url="/activityPage/join/i_join" class="btn2">我要加入</navigator>
				</navigator>
			</footer> -->
			<!-- 底部购买信息 start -->
			<view class="ftr_buy_info" v-show="isShow">
				<view class="cross_btn close_buy_info" @click="viewIsShow">
					<text class="icon-guanbi iconfont" style="color: #999999;"></text>
				</view>
				<view class="ftr_buy_info_goods flex-box">
					<view class="ftr_buy_info_goods_thumb" onclick="$('.full_atlas').show();">
						<image :src="$imgUrls(gooodsData.img)" mode="aspectFill"></image>
					</view>
					<view class="ftr_buy_info_goods_info flex">
						<view class="goods_titles">
							<text class="tag color3">{{gooodsData.group_number}}人团</text>
							<text>{{gooodsData.name}}</text>
						</view>
						<view class="align-center flex-box">
							<view class="ftr_buy_info_goods_price flex">
								<view class="price2_num myPrice">{{gooodsData.open_group_price}}</view>
								<view>
									{{gooodsData.full_price_name}}：<text class="myPrice">{{gooodsData.full_price}}</text>
								</view>
							</view>
						</view>
						
					</view>
				</view>
				<view class="ftr_buy_info_oper">
					<view class="ftr_buy_info_oper_h">数量</view>
					<view class="ftr_buy_info_oper_num">
						<view class="ftr_buy_info_oper_btn minus disabled" data-type="minus">
							<image :src="staticUrl+'/images/minus_ico.png'" v-if="v_input < 2" class="minusBottomBox" mode="aspectFit"></image>
							<image :src="staticUrl+'/images/minus2_ico.png'" v-else @click="minus" class="minusBottomBox" mode="aspectFit"></image>
						</view>
						<input type="number" name="" v-model="v_input" class="ftr_buy_info_oper_input" />
						<view class="ftr_buy_info_oper_btn plus" data-type="plus">
							<image :src="staticUrl+'/images/plus2_ico.png'" class="minusBottomBox" @click="plus" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="btn3" @click="toOrder">确定</view>
			</view>
		</template>
		
		
		<view class="mask" v-show="isShow" @click="viewIsShow"></view>
		
		<showModel @cancelFunc='showModal = false' goHome='0' v-if='showModal' type='2'></showModel>
		
		<!-- 分享海报 -->
		<SharePoster v-if='showShareQr' :myid='options.gid' type='4' :pageType='pageType' @closePoster='showShareQr=false'></SharePoster>
	</view>
</template>

<script>
	import SharePoster from "../../components/sharePoster.vue"
	let that
	export default {
		components: {
			SharePoster
		},
		data(){
			return {
				showShareQr: false,
				
				isShow: false,
				v_input: 1,
				toTop: false,
				pageData: '',
				imgUrl: this.imgUrl,
				shopName: uni.getStorageSync('startUp').shopName,
				showModal: false,// 是否显示模态框
				staticUrl: this.staticUrl,
				options: '',
				vid: '',
				pageType: '',
				gooodsData:'',
			}
		},
		onLoad(options) {
			that = this;
			that.vid = uni.getStorageSync("vid");
			that.options = options
			that.options.gid = that.options.gid?that.options.gid:that.options.goods_id
			that.pageType = '3&gid='+that.options.gid+'&aid='+that.options.aid+'&group_id='+that.options.group_id
			that.getPageData()
		},
		onPageScroll(e){
			if(e.scrollTop > 200){
				this.toTop = true;
			} else {
				this.toTop = false
			}
		},
		methods: {
			getPageData(){
				/**
				 * 参团购买页面获取数据
				 * **/
				that.$http.post({
					url: '/zzj_singleSaleApi/getPurchase',
					data: {
						v_id: that.vid,
						bid: uni.getStorageSync('bid'),
						act_id: that.options.aid,
						goods_id: that.options.gid,
						group_id: that.options.group_id,
					}
				}).then(res => {
					if (res.code == 100) {
						that.pageData = res;
						that.gooodsData = res.data[0].list[0]
						that.gooodsData.content = that.$common.richTxt(that.gooodsData.content).html
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg,
						})
					}
				
				})
			},
			toOrder(){
				uni.navigateTo({
					url: '/orderPage/order/createOrder?goods_id=' + that.options.gid + '&goods_num=' + that.v_input + '&act_id=' + that.options.aid + '&group_id=' +that.options.group_id
				})
			},
			minus:function(){
				//減少數量
				this.v_input = parseInt(this.v_input) - 1;
			},
			plus:function(){
				//增加數量
				this.v_input = parseInt(this.v_input) + 1;
			},
			viewIsShow:function(){
				//打開底部工具欄
				if(parseInt(this.pageData.missPeople) <1){
					uni.showToast({
						icon:'none',
						title:'已经满员啦，自己开团也是一样的哦',
						duration: 2000
					})
					return
				}
				let vid = uni.getStorageSync("vid");
				let user = this.pageData.groupUsers.find(item=>item.v_id == vid)
				if(user){
					uni.showToast({
						icon:'none',
						title:'一个团购只能参与一次哦',
						duration: 2000
					})
					return
				}
				if (!vid) {
					this.showModal = true;
				} else {
					this.isShow = !this.isShow;
				}
			}
		},
		onShareAppMessage(option) {
			var vid = uni.getStorageSync("vid")
			return {
				title: that.gooodsData.name,
				desc: that.gooodsData.info,
				path: '/pages/index/index?share_v_id=' + vid + '&pageType=3&gid=' + that.options.gid+'&aid='+that.options.aid+'&group_id='+that.options.group_id,
				imageUrl: that.$imgUrls(that.gooodsData.img)
			}
		}
	}
</script>

<style scoped lang="scss">
	.closeBottomBox{
		width: 20upx;
		height: 20upx;
		margin: 10upx;
	}
	.minusBottomBox{
		width: 24upx;
		height: 24upx;
		margin: 16upx;
	}
	.ftr_buy_info_goods_thumb image{
		width: 100%;
		height: 100%;
	}
	.btn4{
		margin-top: 80rpx;
	}
	.ftr_buy_info_goods_info .tag.color3 {
		align-items: flex-end;
		position: relative;
		width: auto;
		padding: 0 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		margin-left: 10rpx;
	}
	.shop{
		margin-bottom: 20rpx;
		.shop-logo{
			width: 40rpx;
			height: 40rpx;
			border-radius: 6rpx;
			margin-right: 12rpx;
		}
		.name{
			font-size: 32rpx;
		}
	}
	.page{
		padding-bottom: 129upx;
		.order_goods{
			border-radius: 0;
			margin-bottom: 30upx;
		}
	}
	
</style>
